import { BrowserRouter, NavLink, Route, Redirect } from "react-router-dom";
import routes from "./router/index";
import MyPrompt from "./MyPrompt";
const Com = () => {
  // 创建一个全局数据存储
  const userstate = window.sessionStorage.getItem("user");
  if (!userstate) {
    window.sessionStorage.setItem("user", "false");
  }
  return (
    <BrowserRouter>
      <MyPrompt />
      {/* 导航 */}
      {/* <NavLink to="/">首页</NavLink> */}
      <NavLink style={{color:"black",fontSize:"22px",fontWeight:"500",marginTop:"10px",marginLeft:"96px",textDecoration:"none"}} to="/login">登陆</NavLink>
      <NavLink style={{color:"black",fontSize:"22px",fontWeight:"500",marginTop:"10px",marginLeft:"96px",textDecoration:"none"}} to="/reg">注册</NavLink>
      {/* 线路 */}
      {routes.map((item, index) => {
        return (
          <Route
            key={index}
            path={item.path}
            component={(props) => {
              console.log(props);
              const state = window.sessionStorage.getItem("user");
              // 根据判断做出渲染
              if (!item.auth) {    // auth拦截    意思是，auth不是true的话，不拦截，不拦截执行什么
                if (state === "false") {
                  return <item.component {...props} />;
                } else {
                  return <Redirect to="/home" />;
                }
              } else {
                if (state === "true") {
                  return <item.component {...props} />;
                } else {
                  return <Redirect to="/login" />;
                }
              }
            }}
          />
        );
      })}
    </BrowserRouter>
  );
};

export default Com;





// 开放式作业：
// 作业里需要使用的包含：
// 动态路由
// 二级嵌套
// 重定向和switch
// 作业质量：
// 不许在查作业时出现打不开或控制台报错
// 注释和命名要规范
